<template>
  <div class="lx_rental">
    <div>
      <van-nav-bar
        title="租房信息"
        left-text="返回"
        right-text="发布"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <div style="margin-top: 20px">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>

    <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="rental_content" v-for="item in list" :key="item._id">
            <div class="rental_img" @click="detail(item._id)">
              <img :src="item.img" alt="房屋图片" />
            </div>
            <div class="rental_text">
              <p>{{ item.name }}</p>
              <p style="margin-top:10px">
                {{ item.cate }}<span>{{ item.roomNum }}居</span><span>{{ item.badNum }}床</span
                ><span>{{ item.visitorNum }}人</span><span>{{ item.home_km }}</span>
              </p>
              <p style="color: #ff9f3b;margin-top:5px;">￥{{ item.price }}</p>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
import axios from 'axios'

const value = ref('')
const searchValue = ref('') // 用于保存搜索关键词

const onCancel = () => showToast('取消')
const onClickLeft = () => history.back()
const onClickRight = () => {
  router.push('/addhome')
}

interface RentalItem {
  _id: string
  img: string
  name: string
  cate: string
  roomNum: number
  badNum: number
  visitorNum: number
  home_km: string
  price: number
}

const list = ref<RentalItem[]>([])

const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const page = ref(1)
const pagesize = ref(3)

const router = useRouter()

const onLoad = async () => {
  loading.value = true

  if (refreshing.value) {
    list.value = []
    refreshing.value = false
  }

  try {
    console.log('Search value in onLoad:', searchValue.value)
    const response = await axios.get(
      `http://localhost:3000/lx/rental?page=${page.value}&pagesize=${pagesize.value}&name=${searchValue.value}`
    )
    console.log('API Response:', response.data)

    if (response.data.data.length < pagesize.value) {
      list.value = [...list.value, ...response.data.data]
      finished.value = true
    } else {
      list.value = [...list.value, ...response.data.data]
      loading.value = false
    }
  } catch (error) {
    console.error('Error fetching data:', error)
    loading.value = false
    finished.value = true
  }

  page.value++
}

const onSearch = () => {
  console.log('Search value:', value.value)
  searchValue.value = value.value // 保存搜索关键词
  finished.value = false
  page.value = 1
  loading.value = true
  onLoad()
  list.value = []
  value.value = '' // 清空搜索框
}

const onRefresh = () => {
  finished.value = false
  page.value = 1
  loading.value = true
  onLoad()
}

onMounted(() => {
  onLoad()
})

// 跳转详情页
const detail = (id: number) => {
  router.push('/detail?id=' + id)
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.lx_rental {
  width: 100vw;
  height: 100vh;
  background: #f4f6f9;
}

.rental_content {
  width: 90vw;
  height: 100px;
  margin-left: 18px;
  margin-top: 20px;
  box-shadow: 4px 4px 10px 0 rgba(211, 210, 210, 0.5);
  background: #fff;
  display: flex;
  justify-content: space-around;
}

.rental_img {
  width: 100px;
  height: 80px;
  margin-top: 10px;
}

.rental_text {
  width: 220px;
  height: 80px;
  margin-top: 10px;
}

.rental_img img {
  width: 100%;
  height: 80px;
  border-radius: 5px;
}

span {
  margin-left: 10px;
}
</style>
